{% extends 'userapp/master.html' %}
{% load static %}
{% block content %}

<!-- Start Hero Section -->
<div class="hero">
  <div class="container">
    <div class="row justify-content-between">
      <div class="col-lg-5">
        <div class="intro-excerpt">
          <h1>Payment Successful</h1>
        </div>
      </div>
      <div class="col-lg-7"></div>
    </div>
  </div>
</div>
<!-- End Hero Section -->

<div class="container mt-5 mb-5 d-flex flex-column align-items-center">
  <div class="card shadow-lg p-5 text-center" style="max-width: 500px; border-radius: 20px; border: none;">
    <div class="text-success mb-3">
      <i class="fas fa-check-circle fa-5x animate-check"></i>
    </div>
    <h2 class="text-success fw-bold">Payment Successful!</h2>
    <p class="text-muted">Thank you for your payment. Your ride has been completed and payment confirmed.</p>

    <hr class="my-4">

    <div class="mt-3">
      <a href="{% url 'my_orders' %}" class="btn btn-primary px-5 py-3 rounded-pill shadow-sm btn-hover">
        <i class="fas fa-list"></i> View My Orders
      </a>
    </div>
    <div class="mt-3">
      {% if payment and payment.id %}
      <a href="{% url 'generate_invoice' payment.id %}" 
         class="btn btn-primary px-5 py-3 rounded-pill shadow-sm btn-hover">
        <i class="fas fa-file-download"></i> Download Invoice
      </a>
      {% else %}
      <p class="text-danger">Invoice not available.</p>
      {% endif %}
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
  .animate-check {
    animation: popIn 0.6s ease-in-out;
  }

  @keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); }
  }

  .btn-hover {
    transition: all 0.3s ease-in-out;
    font-weight: 600;
    padding: 12px 24px;
  }

  .btn-hover:hover {
    background: linear-gradient(to right, #007bff, #6610f2);
    transform: scale(1.08);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  }

  .card {
    transition: all 0.3s ease-in-out;
    border-radius: 15px;
    border: none;
  }

  .card:hover {
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
  }
</style>

{% endblock %}